<template>
  <div class="content">
    <h2>App: {{ info }}</h2>
    <ShowInfo :info="info" @changeInfo="changeInfo" :read-info="readInfo" @changeReadInfo="changeReadOnly"/>
  </div>
</template>

<script>
  import ShowInfo from './ShowInfo.vue';
  import { ref, reactive, readonly } from 'vue';

  export default {
    components: {
      ShowInfo
    },
    setup() {
      // 本地定义多个数据,都需要传递给子组件
      const info = reactive({
        name: "why",
        age: 18,
        height: 1.88
      })
      // 使用readOnly函数,将info对象变为只读对象
      const readInfo = readonly(info)
      const changeInfo = (newInfo) => {
        info.name = newInfo;
      }
      const changeReadOnly = (newInfo) => {
        info.name = newInfo;
      }
      return {
        info,
        changeInfo,
        readInfo,
        changeReadOnly
      }
    }
  }
</script>

<style scoped>
</style>